<template>
	<view class="my-box">
		<view class="user-box-top">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="realAvatarUrl"></image>
			</button>
		</view>

		<view class="user-box-bottom">
			<uni-data-picker @change="handleSelectChange" :localdata="listData.college" v-model="bindInfo.college"
				class="user-picker" placeholder="请选择学院" popup-title="请选择所在学院">
			</uni-data-picker>
			<uni-data-picker @change="handleSelectChange" :localdata="listData.major" v-model="bindInfo.major"
				class="user-picker" placeholder="请选择专业" popup-title="请选择所在专业">
			</uni-data-picker>
			<uni-data-picker @change="handleSelectChange" :localdata="listData.class" v-model="bindInfo.class"
				class="user-picker" placeholder="请选择班级" popup-title="请选择所在班级">
			</uni-data-picker>
			<uni-data-picker @change="handleSelectChange" :localdata="listData.number" v-model="bindInfo.number"
				class="user-picker" placeholder="请选择学号" popup-title="请选择学号">
			</uni-data-picker>
		</view>

		<button :disabled="ableEnter" @click="handleButtonClick" class="enter">确认</button>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {
		mapState
	} from 'vuex'

	import {
		getBaseCode
	} from '../../utils/getBaseCode.js'

	import {
		getAvatarStorage
	} from '../../utils/setStorage.js'

	import {
		getScheduleAPI
	} from '../../request/api/schedule.js'
	import {
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				defaultAvatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', // 默认头像
				localAvatarUrl: getAvatarStorage() || '', // 获取本地存储的头像，没有就为空
				ableEnter: false,
				date: new Date(),
			}
		},
		computed: {
			// 最后真正的头像
			realAvatarUrl() {
				if (this.localAvatarUrl !== '') return this.localAvatarUrl
				else return this.defaultAvatarUrl
			},
			...mapState({
				// my页面的vuex状态
				listData: (state) => state.myInfo.listData, // 级联列表
				bindInfo: (state) => state.myInfo.bindInfo, // 级联选项框绑定的值
				schedule: (state) => state.schedule.schedule,
			})
		},
		onLoad() {
			// console.log(this.localAvatarUrl === '')
			this.getMyInfo()
			this.getSchedule()
		},
		methods: {
			...mapActions('myInfo', ['getMyInfo']),

			...mapMutations('schedule', ['changeSchedule']),

			// 选择头像
			onChooseAvatar(e) {
				this.localAvatarUrl = e.detail.avatarUrl
				getBaseCode(e.detail.avatarUrl)
			},

			// 选择改变时
			handleSelectChange() {
				this.ableEnter = false
			},

			// 按钮被点击时
			handleButtonClick() {
				this.ableEnter = true
				this.getSchedule()
			},

			// 获取课程表信息
			async getSchedule() {
				const number = this.bindInfo.number
				if (number === '') {
					return console.log('学号为空')
				}
				const res = await getScheduleAPI(number)
				console.log(res)
				// 传入获取到的课程表和今天是星期几
				this.changeSchedule(res.schedule)
				console.log('今天是星期：', this.date.getDay())
			}
		}
	}
</script>

<style lang="scss">
	body,
	html {
		width: 100%;
		height: 100%;
		background-color: #f7f8fa;
	}

	.my-box {
		background-color: #f7f8fa;
	}

	.user-box-top {
		padding: 100rpx 0;
		background-color: #00b386;

		.avatar-wrapper {
			width: 240rpx;
			height: 240rpx;
			padding: 0 !important;
			border-radius: 50%;
			overflow: hidden;

			.avatar {
				width: 100%;
				height: 100%;
			}
		}
	}

	.user-box-bottom {
		margin-top: 100rpx;

		.user-picker {

			.input-value {
				height: 100rpx;
				background-color: #fff;
				border: none;
			}
		}
	}

	.enter {
		border: none;
		outline: none;
		background-color: #00b386;
		margin: 30rpx 20rpx;
		color: #fff;
	}
</style>